// 访问 redux 中数据
import { useSelector, useDispatch } from 'react-redux';

export const Child = () => {
  // 参数：是一个回调函数，react-redux 去调用，调用时会传入 store 中的 state。
  // useSelector 会调用这个回调，回调的返回值就返回到页面。
  const state = useSelector((state) => state);

  // 创建dispatch发起action（修改数据）
  const dispatch = useDispatch();
  return (
    <div>
      <h2>我是App的子组件组件</h2>
      <div>这是 redux 中的数据: {state}</div>
      <button
        onClick={() => {
          console.log('增加');
          // 告诉 redux 修改数据
          dispatch({ type: 'increment', payload: 5 });
        }}
      >
        增加
      </button>
    </div>
  );
};
